<template>
    <div class="global-setting-container">
        <el-drawer v-model="visible" @close="handleClose" title="全局配置">
            <div class="config-item">
                <div>顶部菜单栏</div>
                <el-switch v-model="topMenu" @change="handleShowTopMenu"></el-switch>
            </div>
            <div class="config-item">
                <div>色弱模式</div>
                <el-switch v-model="weakModel" @change="handleWeakModel"></el-switch>
            </div>
            <div class="config-item">
                <div>主题颜色</div>
                <el-color-picker v-model="color" :predefine="predefineColors" size="large"
                    @change="handleChangeColor" />
            </div>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { useConfigStore } from "@/store/config";
import { getDarkColor, getLightColor } from "@/utils/color";
import { computed } from "vue";

const configStore = useConfigStore()

const visible = computed(() => configStore.showGlobalSetting)
const isDark = computed(() => configStore.darkFlag)

const topMenu = ref(false)
const weakModel = ref(false)
const color = ref('#409eff')

const predefineColors = ref([
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
])

const handleClose = () => {
    configStore.changeGlobal(false)
}

const handleShowTopMenu = () => {
    configStore.changeTopMenu(topMenu.value)
}

const handleWeakModel = () => {
    document.body.style.filter = weakModel.value ? 'invert(80%)' : 'none'
}

const el = document.documentElement
const handleChangeColor = (val: string | null) => {
    //设置ui主题颜色
    el.style.setProperty('--el-color-primary', val)
    el.style.setProperty(
        "--el-color-primary-dark-2",
        isDark.value ? `${getLightColor(val as string, 0.2)}` : `${getDarkColor(val as string, 0.3)}`
    );
    for (let i = 1; i <= 9; i++) {
        const primaryColor = isDark.value ? `${getDarkColor(val as string, i / 10)}` : `${getLightColor(val as string, i / 10)}`;
        el.style.setProperty(`--el-color-primary-light-${i}`, primaryColor);
    }
}
</script>

<style lang="scss">
.global-setting-container {
    .el-drawer__title {
        font-size: 18px;
    }

    .config-item {
        color: var(--el-text-color-primary);
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
    }
}
</style>